import React, { Component } from 'react'
import './css/01-index.css'

export default class App extends Component {
    myRef = React.createRef()

    state = {
        list: [
            {
                id: '111',
                text: '吃饭'
            },
            {
                id: '222',
                text: '睡觉'
            },
            {
                id: '333',
                text: '打豆豆'
            }
        ]
    }

    // 如果把 ref 绑在组件标签上就可以获取组件的实例对象，可以用于组件通信
    render() {
        return (
            <div>
                <input ref={this.myRef} />
                <button onClick={this.handleClick2}>增加记录</button>

                <ul>
                    {this.state.list.map((item, index) =>
                        <li key={item.id}>
                            {/* {item.text} */}

                            {/* 富文本展示 => 能够解析html标签 => 会执行js代码，必须足够信任才可以使用 */}
                            <span dangerouslySetInnerHTML={
                                {
                                    __html:item.text
                                }
                            }></span>

                            <button onClick={() => {
                                this.handleDelClick(index)
                            }} style={{ marginLeft: '5px' }}>删除</button>

                            {/* 另外一种写法 */}
                            {/* <button onClick={this.handleDelClick.bind(this, index)}>
                                删除
                            </button> */}
                        </li>
                    )}
                </ul>

                {/* 该方法可以使节点动态的创建和销毁 相当于vue中的 v-if */}
                {/* 条件渲染：方法一 */}
                {/* {this.state.list.length ? null : <div>暂无代办事项</div>} */}

                {/* 该方法可以使节点动态的创建和销毁 相当于vue中的 v-if */}
                {/* 条件渲染：方法二 */}
                {/* {!this.state.list.length && <div>暂无代办事项</div>} */}


                {/* 该方法是通过控制样式的显示隐藏来实现条件渲染，并没有销毁、创建组件 */}
                {/* 条件渲染：方法三 */}
                <div className={this.state.list.length ? 'hidden' : ''}>
                    暂无代办事项
                </div>

            </div>
        )
    }

    // 不用箭头函数的话这里的this就指向undefined
    handleClick2 = () => {
        // 非空校验
        if (this.myRef.current.value.trim() === '') {
            window.alert('请输入内容！')
            this.myRef.current.value = ''
            return
        }

        // console.log('click2', this.myRef.current.value);

        // 虽然这么写可以实现业务，但是不推荐 => 因为直接修改了状态，可能会造成不可预期的问题
        // this.state.list.push(this.myRef.current.value)

        let newList = [...this.state.list] // 复杂类型 引用赋值，所以这里要用浅拷贝
        // 官方提供了这样一个方案  let b = a.slice() => slice方法不传参数等于复制变量

        newList.push({
            id: Date.now(),
            text: this.myRef.current.value
        })
        this.setState({ list: newList })
        // console.log('newList', newList);
        // 清空输入框
        this.myRef.current.value = ''
    }

    // 删除todo list记录的方法
    handleDelClick = (index) => {
        let newList = this.state.list.concat() //  concat  slice ... 都可以实现浅拷贝
        // 不要直接修改状态，可能会造成不可预期的问题
        newList.splice(index, 1)
        this.setState({ list: newList })
    }
}

